import React from 'react'
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import './Myattentions.css';
import axios from "axios";

const Myattentions = (props) => {
    let user = props.location.state.user;
    const [designList, setdesignList] = useState([]);
    const [userList, setuserList] = useState([]);
    const [attList, setattList] = useState([]);
    const [allList, setallList] = useState([]);
    const [focusList, setfocusList] = useState([])
    let List = [];
    useEffect(() => {
        axios.get("http://192.168.72.166:8080/api/getUserDesignDatas")
            .then(res => {
                const data = res.data.data;
                data.forEach(item => {
                    let design_image = 'http://192.168.72.166:8080/' + item.design_image;
                    item.design_image = design_image
                })
                setdesignList(data)
            });
        axios.get("http://192.168.72.166:8080/api/getUsers")
            .then(res => {
                const data = res.data.data;
                data.forEach(item => {
                    let avatar = 'http://192.168.72.166:8080/' + item.user_head_portrait;
                    item.user_head_portrait = avatar;
                })
                setuserList(data)
            });
        axios.get('http://192.168.72.166:8080/api/getInspirationAttentionDatas/' + user.user_id)
            .then(res => {
                const data = res.data.data;
                setattList(data)
            });

    }, []);
    useEffect(() => {
        List = designList.map(item => {
            const data = userList.find(item1 => item.user_id == item1.user_id);
            return { ...item, ...data };
        });
        setallList(List);
        console.log(attList)
    }, [designList, userList])

    useEffect(() => {
        const newList = attList.map(item => {
            if (user.user_id == item.user_inspiration_id) {
                const data = allList.find(i => item.design_id == i.design_id);
                return { ...data }
            }
        })
        setfocusList(newList)
        // console.log(focusList)
    }, [allList])
    const unfollow = (design_id, user_id) => {
        fetch(`http://192.168.72.166:8080/api/delInspirationAttentionDatas/?user_inspiration_id=${user.user_id}&design_id=${design_id}&user_id=${user_id}`,
            { method: "delete" })
            .then(
                window.location.reload()
            )
    }
    return (
        <div className="focus_box">
            {
                focusList.length ?
                    focusList.map(item => {
                        return (
                            <div className='focus_item' key={item.design_id}>
                                <img className='focus_img' src={item.design_image} />
                                <div className='focus_design'>
                                    <span className='item_name'>{item.design_name}</span>
                                    <div className='focus_designer'>
                                        <img className='focus_designer_avatar' src={item.user_head_portrait} />
                                    </div>
                                    <span className='designer_name'>{item.user_name}</span>
                                    <button className='dbtn' onClick={() => unfollow(item.design_id, item.user_id)}>取消关注</button>
                                </div>
                            </div>
                        )
                    })
                    : <div style={{ margin: 'auto', color: "#762E2F" }}><h2>您未关注任何人</h2></div>

            }
        </div>
    )
}

export default Myattentions;